<template>
  <div class="bottom" id="bottomEcharts2"></div>
</template>

<script>
export default {
  name: 'bottomEcharts2',
  props: {
    bottomEchartsData2: {
      type: [Object, Array]
    }
  },
  data() {
    return {

    };
  },
  created() {
  },
  mounted() {
    setTimeout(() => { // 弹框嵌套图表-请求数据有延迟
      this.bottomEcharts();
    }, 500);
  },
  methods: {
    // 深拷贝
    deepCopy(obj) {
      var tempTool = Array.isArray(obj) ? [] : {};
      for (const key in obj) {
        if (obj.hasOwnProperty(key)) {
          tempTool[key] = typeof obj[key] === 'object'
            ? this.deepCopy(obj[key])
            : Array.isArray(obj) ? Array.prototype.concat(obj[key]) : obj[key];
        }
      }
      return tempTool;
    },
    // 图表数据
    bottomEcharts() {
      const option = this.deepCopy(this.bottomEchartsData2);
      // console.log(option);
      let rightChart = this.$echarts.init(document.getElementById('bottomEcharts2'));
      rightChart.setOption({
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            type: 'pie',
            radius: ['30%', '50%'],
            itemStyle: {
              borderRadius: 3,
              borderColor: '#fff',
              borderWidth: 2
            },
            labelLine: {
              show: true,
              length: 10
            },
            // data: [
            //   {
            //     value: 23,
            //     name: '协作能力',
            //     itemStyle: {
            //       color: '#BEA5F3'
            //     }
            //   },
            //   {
            //     value: 44,
            //     name: '协作能力',
            //     itemStyle: {
            //       color: '#959B83'
            //     }
            //   },
            //   {
            //     value: 33,
            //     name: '协作能力',
            //     itemStyle: {
            //       color: '#FFDBC4'
            //     }
            //   },
            //   {
            //     value: 25,
            //     name: '协作能力',
            //     itemStyle: {
            //       color: '#98E3A2'
            //     }
            //   },
            //   {
            //     value: 64,
            //     name: '协作能力',
            //     itemStyle: {
            //       color: '#95D2DF'
            //     }
            //   },
            //   {
            //     value: 88,
            //     name: '协作能力',
            //     itemStyle: {
            //       color: '#B9BD91'
            //     }
            //   },
            //   {
            //     value: 54,
            //     name: '协作能力',
            //     itemStyle: {
            //       color: '#EEA3A3'
            //     }
            //   },
            //   {
            //     value: 63,
            //     name: '协作能力',
            //     itemStyle: {
            //       color: '#DFF0C4'
            //     }
            //   }
            // ]
            data: option.map(function (item) {
              item.name = item.evaluationDetailItemName;
              item.value = item.sum;
              return item;
            })
          }
        ]
      });
    }
  }
};
</script>

<style lang="less" scoped>
.bottom {
  width: 100%;
  height: 90%;
}
</style>
